<template>
    <transition name="slide">
        <div class="sider" v-if="visible">
            <slot></slot>
            <button @click="visible=false">关闭</button>
        </div>
    </transition>
</template>

<script>
  export default {
    name: "f-sider"
    ,data(){
      return {
        visible:true
      }
    }
  }
</script>

<style lang="scss">
    .sider{
        position:relative;
        >button{
            position:absolute;
            top:0;
            right:0;
        }
    }

    .slide-enter-active,.slide-leave-active{
        transition:margin-left .5s;
    }
    .slide-enter,.slide-leave-to{
        margin-left:-200px;
    }
</style>
